import { ProgressBar, Toast } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { VipPrivilegeData, GlamourPrivilegeData, GetUserInfo } from '../../api/mine'
import NavBar from '../../components/Navbar'
import './index.less'
import appSdk from '../../utils/app_sdk'
import { compareVersions, getVersion, isIOS } from '../../utils/util'

const data = {
  glamour: {
    level: [
      { level: 1, name: '新秀崛起', icon: '' },
      { level: 2, name: '当红小生', icon: '' },
      { level: 3, name: '明日之星', icon: '' },
      { level: 4, name: '一线明星', icon: '' },
      { level: 5, name: '天王巨星', icon: '' }
    ],
    in: '魅力值',
    upIntro: ['收到礼物会增加魅力值', `1${window.baseConfig.coin_name}的礼物=1魅力值`],
    tips: '魅力值代表一个人的受欢迎程度，在聊天室活跃且接受礼物关注等，即可提升魅力值'
  },
  vip: {
    level: [
      { level: 1, name: '默默无闻', icon: '' },
      { level: 2, name: '锋芒毕露', icon: '' },
      { level: 3, name: '闻名一方', icon: '' },
      { level: 4, name: '声名远扬', icon: '' },
      { level: 5, name: '名冠天下', icon: '' }
    ],
    in: '财富等级',
    upIntro: ['赠送礼物会增加VIP值', `1${window.baseConfig.coin_name}的礼物=1VIP值`],
    tips: 'VIP代表一个人的豪气程度，在聊天室活跃且赠送礼物关注等，即可提升VIP成长值'
  }
}

const backgroundLevel = (level) => {
  if (!level || level <= 0) return 0
  if (level <= 12) return 1
  if (level > 12 && level <= 24) return 2
  if (level > 24 && level <= 36) return 3
  if (level > 36 && level <= 48) return 4
  if (level > 48 && level <= 60) return 5
}

// const NavTab = ({ navigate, type, onClick }) => {
//   return (
//     <div className='nav_tab'>
//       <span className={`${type === 'glamour' ? 'active' : 'un'}`} onClick={() => onClick('glamour')}>魅力等级</span>
//       <span className={`${type === 'vip' ? 'active' : 'un'}`} onClick={() => onClick('vip')}>财富等级</span>
//     </div>
//   )
// }

function LevelIntroduction() {
  const params = useSearchParams()[0]
  const navigate = useNavigate()
  const [levelData, setLevelData] = useState({
    stageLevel: 0,
    diff: 0,
    exp: 0,
    glamour: 0,
    wealth: 0,
    stage: { 1: [1, 573] },
    reward: []
  })
  const [type, setType] = useState(params.get('type') || 'vip') // vip | glamour
  const [nickname, setNickname] = useState('')
  const [userInfo, setUserInfo] = useState({ headimgurl: '', wealth_level: 0, glamour_level: 0 })

  const onChange = (type) => {
    setType(type)
  }

  const getUser = () => {
    Toast.show({
      title: '加载中...',
      icon: 'loading'
    })
    GetUserInfo()
      .then((res) => {
        console.log(res)
        setNickname(res.data.nickname)
        setUserInfo(res.data)
      })
      .finally(() => {
        Toast.clear()
      })
  }

  const getVip = () => {
    VipPrivilegeData().then((res) => {
      setLevelData(res.data)
    })
  }

  const getGlamour = () => {
    GlamourPrivilegeData().then((res) => {
      setLevelData(res.data)
    })
  }

  useEffect(() => {
    getUser()
    if (type === 'vip') {
      getVip()
    } else {
      getGlamour()
    }
  }, [type])

  const [barHeight, setBarHeight] = useState(0)
  useEffect(() => {
    console.log(
      `%c Version = ${getVersion() || '1.0.0'} %c`,
      'background:#41b883 ; padding: 4px; border-radius: 4px;  color: #fff',
      'background:transparent'
    )
    if (compareVersions(getVersion() || '1.0.0', '2.2.0') !== -1) {
      appSdk('setFullScreen', 1)
      if (window?.android && window?.android?.getStatusBarHeight) {
        if (window.android.getStatusBarHeight()) {
          setBarHeight(window.android.getStatusBarHeight() / window.devicePixelRatio)
        }
        console.log('拿到状态栏高度', window.android.getStatusBarHeight(), window.devicePixelRatio)
      } else if (isIOS()) {
        appSdk('getStatusBarHeight', null, (res) => {
          console.log('拿到ios状态栏高度', res, window.devicePixelRatio)
          setBarHeight(res / window.devicePixelRatio)
        })
      }
    }
  }, [])

  return (
    <div
      className={`level_introduction detail ${type} level_${backgroundLevel((type === 'vip' ? +userInfo.wealth_level : +userInfo.glamour_level) || 0)}`}
    >
      <NavBar
        title={type === 'glamour' ? '魅力等级' : '财富等级'}
        style={{
          paddingTop: barHeight
        }}
      />
      <div className="intro_content" style={{ height: `calc(100vh - ${barHeight + 45}px)` }}>
        <div className="box info_text">
          <div className="title">
            <div className="icon"></div>
            <div>{type === 'vip' ? '财富' : '魅力'}等级介绍</div>
          </div>
          <div className="box_content">
            {type === 'vip' ? (
              <div>
                用户在{window.baseConfig.package_name}
                充值，赠礼物，参加活动即可获得财富标识，通过赠送礼物，充值消费的数额来决定财富等级。财富换算公式为：1{' '}
                {window.baseConfig.coin_name}的礼物=1 财富值
              </div>
            ) : (
              <div>
                用户在房间内收到礼物会增加相应的魅力值，在私聊中赠送并不会增魅力值，赠送礼物的价值对应的魅力值换算公式为 1{' '}
                {window.baseConfig.coin_name}的礼物=1 魅力值。
              </div>
            )}
          </div>
        </div>
        <div className="box level_icons">
          <div className="title">
            <div className="icon"></div>
            <div>图标展示</div>
          </div>
          <div className="box_content">
            {data[type].level.map((item) => (
              <div className="item" key={item.level}>
                <div
                  className="icon"
                  style={{
                    backgroundImage: `url(${`../../images/${type}_icon${item.level}.png`})`
                    // backgroundSize: 'contain'
                  }}
                />
                <div className="name">{item.name}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="box experience">
          <div className="title">
            <div className="icon"></div>
            <div>{type === 'vip' ? '财富' : data[type].in}对应等级经验值</div>
          </div>
          <div className={'box_content ' + type}></div>
        </div>
      </div>
    </div>
  )
}

export default LevelIntroduction
